<template>
  <div class="app-container" :style="{height: setBoxHeight +'px'}">
    <!--向导窗口-->
    <div class="guide-box">
      <!--标题-->
      <div class="content-title">
        <i class="el-icon-milk-tea"></i>
        <span>页面设计向导</span>
      </div>
      <div class="body">
        <div class="title-box">
          <div class="item-title">这是一个页面菜单，你可以:</div>
        </div>
        <div class="create-box">在线构建一个页面，该页面包含多个数据展示组件，并对各组件分别绑定数据源。
          <div class="path-box path-input-box">
            <el-button class="btn" type="primary" @click="pageBuild">构建</el-button>
<!--            <router-link :to="{name:'PageGenerBuild',params:pageConfig}">-->
<!--              <el-button class="btn" type="primary">创建</el-button>-->
<!--            </router-link>-->
          </div>
        </div>
        <div class="title-box">
          <div class="item-title">或通过该菜单打开一个页面地址:</div>
        </div>
        <div class="path-box create-box">
          <span>是否新页面打开</span>
          <el-tooltip content="例如：网络地址【https://www.baidu.com】、项目内组件地址【error/401】以根目录views下的绝对路径" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
          <div style="margin-left:20px">
            <el-radio v-model="pageConfig.isFrame" label="1">否</el-radio>
            <el-radio v-model="pageConfig.isFrame" label="0">是</el-radio>
          </div>
        </div>
        <el-input v-model="pageConfig.path" placeholder="Http 或者 组件地址"></el-input>
        <div class="path-box path-input-box">

          <el-button class="btn" type="primary" @click="savePath">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import store from "@/store";
import router from "@/router";

export default {
  name: "DesignGuideSet",
  props:{
    pageConfig: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      setBoxHeight:0
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(()=>{
      this.setBoxHeight = document.body.clientHeight
    })
  },
  methods: {
    /**
     * 保存路由地址
     */
    savePath(){
      if(!this.strIsNotEmpty(this.pageConfig.buildKey)){
        this.msgError("菜单配置异常，未获取到表单设计KEY");
        return;
      }
      if(!this.strIsNotEmpty(this.pageConfig.path)){
        this.msgError("请输入路由地址");
        return;
      }
      this.pageConfig['formBuildKey']=this.pageConfig.buildKey
      request({
        url: 'updateMenusPath',
        method: 'post',
        data: this.pageConfig
      }).then(res => {
        if (res.code == 200) {
          if(this.ishttp(res.data)){
            this.resetMenu(res.data);
          }else{
            this.refreshRoute();
          }
        }else{
          this.msgError(res.msg);
        }
      })

    },
    /**
     * 重置菜单
     */
    resetMenu(menuPath) {
      let that=this
      this.$modal.loading("正在重置菜单路由并刷新，请稍候...");
      store.dispatch('GenerateRoutes').then(accessRoutes => {
        // 根据roles权限生成可访问的路由表
        router.addRoutes(accessRoutes) // 动态添加可访问路由表
        setTimeout(()=>{
          that.$router.push({name:menuPath,params: { t: Date.now() } })
          that.$modal.closeLoading();
        }, 1000)
      })
    },
    refreshRoute() {
      const currentPath = this.$route.path;
      const refreshedRoute = this.$router.resolve({ path: currentPath });
      window.location.href = refreshedRoute.href;
    },
    ishttp(menuPath){
      if(menuPath==undefined){
        return false;
      }
      let _menuPath=menuPath.toLowerCase();
      if(_menuPath.startsWith("http://") || _menuPath.startsWith("https://")){
        return true;
      }
      return false;
    },
    /** 页面构建 */
    pageBuild() {
      this.$tab.openPage("[" + this.pageConfig['$routerTitle'] + "]页面构建", '/ysd/tool/PageGenerBuild/index/' + this.pageConfig['buildKey'], this.pageConfig);
    }
  },
};
</script>

<style scoped>

.app-container{
  display: flex;
  align-items: start;
  justify-content: center;
  padding: 0px;
}

.guide-box{
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-color: #f2f2f2;
  font-size: 16px;
  width: 100%;
  height: 100%;
  /*box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);*/
}

.guide-box > .content-title > .el-icon-guide{
  font-size: 40px;
}

.guide-box > .content-title {
  background-color: #304156;
  color: white;
  width: 100%;
  padding: 10px;
}

.guide-box > .content-title span {
  margin-left: 6px;
}



.guide-box > .body{
  padding: 30px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.guide-box > .body .create{
  color: #11a983;
}
.guide-box > .body .create-box{
  margin: 10px 0;
  width: 100%;
}

.guide-box > .body .create:hover{
  cursor: pointer;
}

.guide-box > .body .path-box{
  display: flex;
  align-items: center;
}
.guide-box > .body .path-input-box{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
/*.guide-box > .body .path-input-box .btn{*/
/*  margin-left: 10px;*/
/*}*/

.guide-box > .body .el-radio{
  margin-right:15px !important;
}


.body .title-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e1e1e1;
}

.body .title-box .icon{
  margin-left: 4px;
}

.body .title-box .item-title {
  font-weight: bold;
}

</style>
